<route>
    {
        meta: {
            layout: 'flow',
            title:'事件管理'
        }
    }  
</route>
<template>
    <view>
        <AntdZh>
            <a-table bordered :columns="columns" :data-source="tableData" :bordered="false" :loading="loading"
                :pagination="false" rowKey="id" @change="handleTableChange">
                <template #expandedRowRender="{ record }">

                    <EventService :eventId="record.eventId"></EventService>
                </template>
                <template #bodyCell="{ column, record, index }">
                    <template v-if="column.dataIndex === 'status'">
                        <!--执行状态-->
                        <a-tag color="green" v-if="record.status">启用</a-tag>
                        <a-tag color="red" v-else>停用</a-tag>

                    </template>
                    <template v-else-if="column.dataIndex === 'isAsync'">
                        <!--执行状态-->
                        <SyncOutlined spin style="color:darkgreen;font-size: 24px;"></SyncOutlined>
                    </template>
                    <template v-else-if="column.dataIndex === 'eventRange'">
                        <!--执行状态-->
                        全局事件
                    </template>
                    <template v-else-if="column.dataIndex === 'runScript'">
                        <a-popover title="执行脚本">
                            <template #content>
                                <JsonEditor style="width: 400px;" v-model:value="record.runScript" readOnly>
                                </JsonEditor>
                            </template>
                            <CodeOutlined style="color:black;font-size: 24px;"></CodeOutlined>
                        </a-popover>
                    </template>
                    <template v-if="column.dataIndex === 'action'">
                        <a-row>
                            <a-col :span="6">
                                <a-tooltip>
                                    <template #title>修改信息</template>
                                    <view>
                                        <a-button type="link" @click="$.emit('update-define', record.id)">
                                            <FormOutlined />
                                        </a-button>
                                    </view>
                                </a-tooltip>
                            </a-col>
                            <a-col :span="6">
                                <a-popconfirm title="是否删除该事件 ?" @confirm="handleDelete(record.id)">
                                    <a-tooltip>
                                        <template #title>事件删除</template>
                                        <view>
                                            <a-button type="link">
                                                <DeleteOutlined style="color: #f5222d;" />
                                            </a-button>
                                        </view>
                                    </a-tooltip>
                                </a-popconfirm>
                            </a-col>
                        </a-row>
                    </template>
                </template>
            </a-table>
        </AntdZh>
    </view>
</template>
<script setup>
import EventService from "./components/EventService/index.vue"
import { SafetyOutlined, FormOutlined, KeyOutlined, PlusOutlined, DeleteOutlined, DesktopOutlined, SyncOutlined, CodeOutlined } from '@ant-design/icons-vue';
import useApp from '@/hooks';
const { $ } = useApp();
import { columns, defaultQueryParams } from './index';
import { queryList, deleteOne } from '@/module/flow/api/event';
const tableData = ref([])
const loading = ref(false)
const total = ref(0)
const queryParams = ref($.freeStore(defaultQueryParams))
const pagination = computed(() => ({
    total: total.value,
    current: queryParams.pageNum,
    pageSize: queryParams.pageSize,
}));
function handleTableChange(page, filters, sorted) {
    queryParams.value.pageSize = page.pageSize;
    queryParams.value.pageNum = page.current;
    // 获取 status
    // 状态
    var status = filters.status;
    console.log(status)
    if ($.isNotEmpty(status)) {
        queryParams.value.status = status[0];
    } else {
        queryParams.value.status = null
    }
    var groups = filters.flowGroup;
    if ($.isNotEmpty(groups)) {
        queryParams.value.groups = groups;
    } else {
        queryParams.value.groups = []
    }
    reqData();
}
// 删
function handleDelete(id) {
    deleteOne(id).then(res => {
        $.showToast({
            title: '删除成功',
            icon: 'success'
        })
        reqData()
    })
}
// 请求数据
function reqData() {
    loading.value = true;
    queryList(queryParams.value).then(res => {
        console.log(res)
        loading.value = false;
        tableData.value = res.content;
        total.value = res.totalElements;
    })
}
reqData();
// $.on('fresh-define', r => {
//     reqData();
// });
</script>